<template>
  <tab-bar>
      <!-- 路径，详情见build->webpack.base.config.js->resolve -->
      <tab-bar-item path="/home">
        <img slot="item-icon" src="~assets/img/icon01.png" alt="">
        <img slot="item-icon-active" src="~assets/img/icon01_active.png" alt="">
        <div slot="item-text">首页</div>
      </tab-bar-item>

      <tab-bar-item path="/category" activeColor="blue">
        <img slot="item-icon" src="~assets/img/icon02.png" alt="">
        <img slot="item-icon-active" src="@/assets/img/icon02_active.png" alt="">
        <div slot="item-text">分类</div>
      </tab-bar-item>

      <tab-bar-item path="/cart" activeColor="rgb(203 54 241)">
        <img slot="item-icon" src="@/assets/img/icon03.png" alt="">
        <img slot="item-icon-active" src="@/assets/img/icon03_active.png" alt="">
        <div slot="item-text">购物车</div>
      </tab-bar-item>

      <tab-bar-item path="/profile" activeColor="rgb(61 218 117)">
        <img slot="item-icon" src="@/assets/img/icon04.png" alt="">
        <img slot="item-icon-active" src="@/assets/img/icon04_active.png" alt="">
        <div slot="item-text">我的</div>
      </tab-bar-item>

    </tab-bar>
</template>
<script>
import TabBar from 'components/tabbar/TabBar'
import TabBarItem from 'components/tabbar/TabBarItem'
export default {
  name:'MainTabBar',
  components:{
    TabBar,
    TabBarItem
  }
}
</script>
<style scoped>

</style>